<template>
  <el-row :class="tabType + '_conbox'">
    <!-- <el-col :class="isFullChat ?'fullStyle': ''" :span="expandLayout ? 8 : 14"> -->
    <el-col class="fullChat fullHeight" :span="expandLayout ? 8 : 14">
    <!-- <el-col :class="{'fullStyle':true}" :span="expandLayout ? 8 : 14"> -->
      <div class="chat_msg_box">
        <div @click="setFullChat" class="fullChat">
          <i v-if="!fullChat" class="iconfont icon-xiangshangshuangjiantou"></i>
          <i v-else class="iconfont icon-xiangshangshuangjiantou stow"></i>
        </div>
        <webchat-con-chat-head
          :showGrabIcon="showGrabIcon"
          :isVideoing="isVideoing"
          :videoSessionid="videoSessionid"
          @VideoTips="showVideoTipsDialog"
        ></webchat-con-chat-head>
        <webchat-con-msg-box
          :chatMsgCon="chatMsgCon"
          :uploaded="uploaded"
          :expandLayout="expandLayout"
          :initiativeSession="((tabType === 'webchat_all' || tabType === 'webchat_laterProcess' || tabType === 'webchat_robot') && chatInfo.status === 'finish') ? true : false"
          @handleFullChat="handleFullChat"
          @videoReplay="videoReplay"
        ></webchat-con-msg-box>
        <send-chat-msg-box v-if="urlTabType === 'webchat_todo'"
          :sendChatMsg="sendChatMsg"
          :webchatUserHistory="webchatUserHistory"
          :iframeMsgUrl="iframeMsgUrl"
          :uploaded="uploaded"
          :chatMsgCon="chatMsgCon"
          :expandLayout="expandLayout"
          @handleFullChat="handleFullChat"
          @VideoTips="showVideoTipsDialog"
          @customerAddBlack="customerAddBlack"
          @startVideoChat="startVideoChat"
          @startShareScreen="startShareScreen"
        >
        </send-chat-msg-box>
        <div :style="{width: expandLayout ? '33.33333%' : '58.3333%'}" v-if="(tabType === 'webchat_all' || tabType === 'webchat_laterProcess' || tabType === 'webchat_robot') && chatInfo.status === 'finish' && chatInfo.platform !== 'ocpc'" class="initiativeSession">
          <div class="initiative-warp"></div>
          <el-button class="initiative-btn primary_btn" type="primary" @click="initiatingWebchat">{{initiatingSessionBtn}}</el-button>
        </div>
        <div :style="{width: expandLayout ? '33.33333%' : '58.3333%'}" v-if="tabType === 'webchat_queue'" class="initiativeSession">
          <div class="initiative-warp"></div>
          <el-button v-if="isShowQueueReceiveSession" class="initiative-btn primary_btn" type="primary" @click="queueWebchat">{{$t('business.received')}}</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="expandLayout ? 16 : 10" style="height: 300px; z-index: 2999" v-if="!renderCustomer" v-loading="!renderCustomer"></el-col>
    <el-col :span="expandLayout ? 16 : 10" v-if="renderCustomer">
      <webchat-con-chat-info
        :webchatData="webchatData"
        :chatInfo="chatInfo"
        :customer="customer"
        :currentBusinessObj="currentBusinessObj"
        @toggleExpandLayout="handleExpandLayout"
      ></webchat-con-chat-info>
    </el-col>
    <!-- <el-dialog :close-on-click-modal="false"  :title="$t('videoChat.operaTip')" :visible.sync="VideoTipsDialog" :modal="false" custom-class="VideoTips" size="tiny">
      <p class="tipsword">{{VideoActionTips}}</p>
      <div class="tipsbutton">
        <el-button type="primary" class="primary_btn" @click="VideoTipsDialog = false">{{$t('public.confirm')}}</el-button>
      </div>
    </el-dialog> -->
    <!-- <el-dialog :close-on-click-modal="false"  :title="$t('videoChat.operaTip')" :visible.sync="VideoHideCameraDialog" :modal="false" custom-class="VideoTips" size="tiny" width="30%">
      <p class="tipsword">{{VideoActionTips}}</p>
      <div class="tipsbutton">
        <el-button type="primary" class="primary_btn" @click="requestVideoChat('false')">{{$t('webchat.openCamera')}}</el-button>
        <el-button type="primary" class="primary_btn" @click="requestVideoChat('true')">{{$t('webchat.closeCamera')}}</el-button>
      </div>
    </el-dialog> -->
    <invite-conversation v-if="inviteCon" :inviteType="'invite'" :inviteConData="inviteConData" @closeInvite="cancelInviteSession"></invite-conversation>
  </el-row>
</template>
<script type="text/javascript">
  import { deepClone, contains, getCache, initFinishName, isHasFunc } from '@/utils/m7Utils'
  import * as webchatUtils from '@/utils/webchat.js'
  import * as types from '@/store/modules/webchat/mutation-types.js'
  import InviteConversation from '@/components/public-modules/InviteConversation/InviteConversation.vue'
  import WebchatConMsgBox from './WebchatConMsgBoxNew.vue'
  import WebchatConChatHead from './WebchatConChatHead.vue'
  import WebchatConChatInfo from './WebchatConChatInfo.vue'
  import sendChatMsgBox from './WebchatConSendMsg.vue'
  import * as uuid from 'uuid'
  import bus from '@/store/eventBus'
  export default {
    name: 'WebchatContainer',
    props: {
      customer: {
        type: Object,
        default: function () {
          return {}
        }
      },
      currentBusinessObj: {
        type: Object,
        default: function () {
          return {
            type: 'webchat',
            tabType: 'webchat_todo'
          }
        }
      },
      tabType: {
        type: String,
        default: 'webchat_todo'
      }
    },
    data () {
      return {
        chatHead: {
          dialogTableVisible: false,
          endOptionsUl: [],
          endSessionActive: [],
          endSessionFlag: false
        },
        chatMsgCon: {
          font: 'font12'
        },
        sendChatMsg: {
          content: ''
        },
        finishOptions: {},
        showGrabIcon: false,   // 判断是否展示抢接会话按钮会话的依据
        uploaded: {
          uploadImg: false,
          uploadImgSessionId: '',
          uploadFile: {
            flag: false,
            progress: '',
            name: '',
            uploadFileSessionId: ''
          }
        },
        VideoTipsDialog: false,
        VideoHideCameraDialog: false,
        isShowQueueReceiveSession: true,
        VideoActionTips: '',
        roomId: uuid.v1().toString(), // 视频房间号
        iframeMsgUrl: '',     // iframe消息地址
        renderCustomer: false,  // 异步加载右侧详情组件
        initiatingSessionBtn: this.$t('webchat.initiatingSession'), // 发起主动会话按钮上的文案
        expandLayout: false, // 展开布局flag
        fullChat: false // im展开收起
      }
    },
    methods: {
      handleFullChat () { // 点击放大镜或者是发送框操作栏的知识库
        if (this.fullChat) { // 如果当前时满屏的，要先展开，不然看不到知识库页面
          this.setFullChat()
        }
      },
      setFullChat () {
        this.fullChat = !this.fullChat
        const chat = this.$el.querySelector('.fullChat')
        chat.style.width = chat.style.width ? '' : '100%'
        this.updateFullChat(this.fullChat)
      },
      updateFullChat (bol) {
        try {
          localStorage.setItem('isFullChat', bol ? '1' : '0')
        } catch(err) {
          console.log(err)
        }
      },
      updateFullChatFromLocal () {
        const chat = this.$el.querySelector('.fullChat')
        this.fullChat = localStorage.getItem('isFullChat') === '1'
        chat.style.width = this.fullChat ? '100%' : ''
      },
      shortcutDispatch(e) {
        const suggest = {  // 发送建议框消息
          boxClass: 'suggest',
          msgSendClass: 'replyMsg',
          textarea: 'send_msg_textarea'
        }
        const keysReversMap = {
          49: 1,
          50: 2,
          51: 3,
          52: 4,
          53: 5
        }
        const isFullChat = e.altKey && e.keyCode === 81
          if (isFullChat) {
            const textarea = this.$el.getElementsByClassName(suggest.textarea)[0]
            textarea && (textarea.disabled = true)
            try {
              // const chat = this.$el.querySelector('.fullChat')
              // chat.style.width = chat.style.width ? '' : '100%'
              // this.updateFullChat(Boolean(chat.style.width))
               this.setFullChat()
            } finally {
              textarea && (textarea.disabled = false)
            }
        } else if (e.altKey && [49,50,51,52,53].includes(e.keyCode)) { // 快捷回复
            const textarea = this.$el.getElementsByClassName(suggest.textarea)[0]
            try {
              const index = keysReversMap[e.keyCode] - 1
              const { boxClass } = suggest
              const box = this.$el.getElementsByClassName(boxClass)[0]
              if (box.style.display === 'none') {
                return
              }
              const children = box.children[0].children
              const dom = children[index]
              if (!dom) {
                return
              }
              textarea && (textarea.disabled = true)
              bus.$emit('onQuickReply', {
                con: dom.innerText,
              })
            } catch (err) {
              console.log(err)
            }finally {
              if (textarea) {
                textarea.disabled = false
                textarea.focus()
              }
            }
        }
      },
      handleExpandLayout (state) {
        this.expandLayout = state
      },
      showVideoTipsDialog (tips) {
        // this.VideoTipsDialog = true
        // this.VideoActionTips = tips
        this.$message.error(tips)
      },
      videoReplay (videomsg) {
        this.$emit('videoReplay', videomsg)
      },
      cancelInviteSession (data) {
        this.$store.commit(types.CANCEL_WEBCHAT_INVITECONDATA, {sessionId: data.sessionId, value: false})
      },
      endSessionFun () {
        let data = {
          _id: this.webchatData._id,
          sid: this.webchatData.sid,
          finishReason: this.$t('webchat.addBlack'),
          finishKey: 'add_black',
          remark: ''
        }
        this.$store.dispatch('finishWebchatSession', data).then(() => {
          this.$store.commit('BLANK', 'webchat_todo')
          this.$router.replace({path: '/index/webchat/webchat_todo'})
        })
      },
      fetchData () {
        if (document.querySelectorAll('.send_msg_textarea')[0]) {
          document.querySelectorAll('.send_msg_textarea')[0].focus() // 获取焦点
        }
        if (this.tabType === 'webchat_todo') {
          this.showGrabIcon = false
        } else if (this.tabType === 'webchat_all' || this.tabType === 'webchat_robot' || this.tabType === 'webchat_laterProcess' || this.type === 'webchat_queue') {
          // 全部中展示浏览信息
          let isContainPeer = false
          let self = this
          this.$store.dispatch('getCache', {type: 'accessChannelAgent', id: this.webchatData.toPeer}).then((peer) => {
            if (peer && peer.agents && peer.agents.length) {
              let accessAgents = []
              accessAgents = peer.agents
              accessAgents.forEach((item) => {
                if (item.agentID === this.$store.state.session.user._id) {
                  isContainPeer = true
                }
              })
            }
            if (!isContainPeer) {
              self.showGrabIcon = false
            } else if (this.$store.state.session.user._id === this.webchatData.user) {
              self.showGrabIcon = false
            } else if (this.webchatData.status !== 'deal') {
              self.showGrabIcon = false
            } else if (!contains(this.$store.state.session.user.funcIds, 'func_webchat_grab')) {
              self.showGrabIcon = false
            } else if (this.webchatData.inviteUserStatus === 'accept') {
              self.showGrabIcon = false
            } else {
              self.showGrabIcon = true
            }
          })
        }
      },
      getAllQuickReplay () {
        let flag = this.$store.state.webchat.current.webchat_todo.allQuickReply.flag
        if (flag) {
          let data = {
            'moduleType': 'webchat'
          }
          this.$store.dispatch('getAllQuickReplyListNew', data)
        }
      },
      customerAddBlack () { // 客户加入黑名单
        this.endSessionFun()
      },
      startVideoChat (data) {
        if (this.isVideoing || this.isInviteVideo) {
          // this.VideoTipsDialog = true
          // this.VideoActionTips = this.$t('videoChat.EndExistVideoFirst')
          this.$message.error(this.$t('videoChat.EndExistVideoFirst'))
          return
        }
        if (this.isScreenShareing && this.webchatData._id === this.screenShareSessionId) {
          // this.VideoTipsDialog = true
          // this.VideoActionTips = this.$t('screenShare.EndExistShareFirst')
          this.$message.error(this.$t('screenShare.EndExistShareFirst'))
          return
        }
        let currentWebchat
        let webchatList = this.$store.state.webchat.webchatList.webchat_todo.list
        webchatList.forEach((item) => {
          if (item._id === this.webchatData._id) {
            currentWebchat = item
          }
        })
        if (currentWebchat.userStatus === 'offline') {
          // this.VideoTipsDialog = true
          // this.VideoActionTips = this.$t('videoChat.ChatOfflineCanNotVideo')
          this.$message.error(this.$t('videoChat.ChatOfflineCanNotVideo'))
          return
        }
        // if (currentWebchat.platform === 'sdk') {
          // this.VideoHideCameraDialog = true
          // this.VideoActionTips = this.$t('webchat.InviteVideoCall', {visitor: currentWebchat.sName})
          // this.$message.error(this.$t('videoChat.ChatOfflineCanNotVideo'))
          // return
        // }
        this.$store.commit(types.UPDATE_VIDEO_INVITE_PERSONNEL, "agent")
        if (data === 'voice') {
          this.requestVideoChat('true')
        } else {
          this.requestVideoChat('false')
        }
      },
      startShareScreen () {
        if (this.isVideoing || this.isInviteVideo) {
          // 视频中或被视频邀请中
          // this.VideoTipsDialog = true
          // this.VideoActionTips = this.$t('videoChat.EndExistVideoFirst')
          this.$message.error(this.$t('videoChat.EndExistVideoFirst'))
          return
        }
        if (this.isScreenShareing) {
          // 已经在桌面共享过程中了
          // this.VideoTipsDialog = true
          // this.VideoActionTips = this.$t('screenShare.EndExistShareFirst')
          this.$message.error(this.$t('screenShare.EndExistShareFirst'))
          return
        }
        // 访客离线
        let currentWebchat
        let webchatList = this.$store.state.webchat.webchatList.webchat_todo.list
        webchatList.forEach((item) => {
          if (item._id === this.webchatData._id) {
            currentWebchat = item
          }
        })
        if (currentWebchat.userStatus === 'offline') {
          // this.VideoTipsDialog = true
          // this.VideoActionTips = this.$t('screenShare.ChatOfflineCanNotShare')
          this.$message.error(this.$t('screenShare.ChatOfflineCanNotShare'))
          return
        }
        if (this.inviteCon || this.webchatData.inviteUserStatus === 'accept' || this.beInvitedCon) {
          // 处于三方会话中
          this.$message({
            message: this.$t('screenShare.agent_three_share'),
            type: 'error'
          })
          return
        }
        let msg = {
          status: true,
          id: this.webchatData._id,
          name: this.webchatData.sName
        }
        this.$store.dispatch('changeStatusBeforeShare', {_id: this.webchatData._id, operation: 'confirm', sid: this.webchatData.sid || ''})
        this.$store.commit(types.SET_SHARESCREEN, msg)
      },
      initData () {
        this.fetchData()
        if (!this.currentCustomer._id) {
          let dataObj = {
            importSid: webchatUtils.getImportSidByPlantform(this.chatInfo.sid, this.chatInfo.platform)
          }
          this.$store.dispatch('getMatchMsgResponse', {data: dataObj, sid: this.sessionId})
        }
        this.chatMsgCon.font = window.localStorage.getItem('imFontCon')
        if (!this.nowTime) {
          let data = new Date()
          let time = data.getTime()
          this.$store.dispatch('getServerTimeDiff', time).then((res) => { // 获取当前时间和服务器的时间差
            if (res.success) {
              this.$store.commit(types.SET_SERVER_TIME_DIFF, res.data)
            }
          })
        }
        if (!this.chatMsgCon.font) { // 没有设置字体大小使用默认的
          this.chatMsgCon.font = 'font12'
        }
        if (this.tabType === 'webchat_todo' && document.getElementsByClassName('send_msg_textarea')) {
          this.getAllQuickReplay()
        }
        if (this.$route.path.split('/').length > 4 && this.$store.state.webchat.lastContent[this.$route.path.split('/')[4]] !== undefined) {
          this.sendChatMsg.content = this.$store.state.webchat.lastContent[this.$route.path.split('/')[4]]
        }
        this.$store.dispatch('getCache', {type: 'channelDic'}).then((res) => {
          for (let i = 0; i < res.length; i++) {
            if (res[i].type === 'webchat') {
              this.finishArr = res[i].options || []
              break
            }
          }
          this.finishOptions = initFinishName(this.finishArr, {})
        })
      },
      // 在线咨询座席主动发起会话
      initiatingWebchat () {
        // cc20.4需求，对接会话支持发起主动会话
        // if (this.chatInfo && this.chatInfo.docking) {
        //   this.$message.error(this.$t('webchat.DockingCannotInitiatingSession'))
        //   return
        // }
        this.initiatingSessionBtn = this.$t('webchat.initiatingSessionNow')
        this.$store.dispatch('initiatingWebchat', {chatSessionId: this.webchatData._id, sid: this.webchatData.sid || ''}).then((res) => {
          if (res.success) {
            this.initiatingSessionBtn = this.$t('webchat.initiatingSession')
            let isLeaveMsg = this.webchatData.leavemsg ? true : false
            bus.$emit('initiatingWebchatFun', isLeaveMsg)
            this.$message.success(this.$t('webchat.initiatingSucceess'))
          } else {
            this.initiatingSessionBtn = this.$t('webchat.initiatingSession') // 改变按钮的显示状态
            if (res.message === 'webchat.webchat_not_finish' && res.data) {
              if (res.data.status === 'deal') {
                this.$message.error(this.$t('webchat.initiatingSessionDeal', {agent: res.data.exten}))
              } else if (res.data.status === 'robot') {
                this.$message.error(this.$t('webchat.initiatingSessionRobot'))
              } else if (res.data.status === 'undeal') {
                this.$message.error(this.$t('webchat.initiatingSessionUndeal'))
              } else {
                this.$message.error(this.$t('webchat.initiatingSessionOther'))
              }
            }
          }
        })
      },
      queueWebchat () { // 排队会话领取
        this.$store.dispatch('queueclaimSession', {sessionId: this.webchatData._id, sid: this.webchatData.sid || ''}).then((res) => {
          if (res && res.success) {
            bus.$emit('refresh')
            this.$store.commit('BLANK', 'webchat_queue')
            this.$router.replace({path: '/index/webchat/webchat_queue'})
          } else {
            bus.$emit('refresh')
            this.$message.error('领取失败，当前会话已被其他坐席领取')
          }
        })
      },
      // 座席发起主动会话是否开启摄像头
      requestVideoChat (hideCamera) {
        var type = 'video'
        if (hideCamera === 'true') {
          type = 'voice'
          this.$store.commit(types.UPDATE_HIDE_VIDEO_CAMERA_STATU, true)
        } else if (hideCamera === 'false') {
          type = 'video'
          this.$store.commit(types.UPDATE_HIDE_VIDEO_CAMERA_STATU, false)
        }
        let msg = {
          currUser: this.webchatData.user,
          sid: this.webchatData.sid,
          sessionId: this.webchatData._id,
          sName: this.webchatData.sName,
          newVideo: true,
          videoType: type
        }
        this.$store.dispatch('requestVideoChat', msg)
      }
    },
    watch: {
      $route (to, from) {
        let toArr = to.path.split('/')
        if (toArr[2] === 'webchat' && this.loading === false) {
          this.fetchData()
        }
        if (toArr[2] === 'webchat')
        this.sendChatMsg.content = ''
        this.chatMsgCon.font = window.localStorage.getItem('imFontCon')
        if (!this.chatMsgCon.font) {
          this.chatMsgCon.font = 'font12'
        }
        if (to.path.split('/').length > 4) {
          if (this.$store.state.webchat.lastContent[to.path.split('/')[4]] !== undefined) {
            this.sendChatMsg.content = this.$store.state.webchat.lastContent[to.path.split('/')[4]]
          }
        }
        let fromArr = from.path.split('/')
        let conbox = document.getElementsByClassName('send_msg_textarea')
        if (conbox.length && fromArr.length > 4) {
          let value = conbox[0].value
          this.$store.commit(types.REMEMBER_LAST_CON, {id: fromArr[4], data: value})
        }
      },
      shortcutOpen () {
        if(this.shortcutOpen) {
          document.removeEventListener('keydown', this.shortcutDispatch)
          document.addEventListener('keydown', this.shortcutDispatch)
        } else {
          document.removeEventListener('keydown', this.shortcutDispatch)
        }
      }
    },
    components: {
      sendChatMsgBox,
      InviteConversation,
      WebchatConMsgBox,
      WebchatConChatHead,
      WebchatConChatInfo
    },
    computed: {
      shortcutOpen: {
        get(){
          return this.$store.state.config.shortcutKey.openShortcutKey.imSwitch
        },
        set(v) { }
      },
      sessionId () {
        let arr = this.$route.path.split('/')
        return arr[4]
      },
      urlTabType () {
        let arr = this.$route.path.split('/')
        return arr[3]
      },
      nowTime () {
        return this.$store.state.webchat.nowTimeDiff || 0
      },
      webchatUserHistory () {
        if (this.tabType === 'webchat_todo' && this.$store.state.webchat.current.webchat_todo.messageList[this.sessionId]) {
          return this.$store.state.webchat.current.webchat_todo.messageList[this.sessionId]
        } else if (this.tabType === 'webchat_all' && this.$store.state.webchat.current.webchat_all.messageList) {
          return this.$store.state.webchat.current.webchat_all.messageList
        } else if (this.tabType === 'webchat_robot' && this.$store.state.webchat.current.webchat_robot.messageList) {
          return this.$store.state.webchat.current.webchat_robot.messageList
        } else if (this.tabType === 'webchat_laterProcess' && this.$store.state.webchat.current.webchat_laterProcess.messageList) {
          return this.$store.state.webchat.current.webchat_laterProcess.messageList
        } else if (this.tabType === 'webchat_queue' && this.$store.state.webchat.current.webchat_queue.messageList) {
          return this.$store.state.webchat.current.webchat_queue.messageList
        } else {
          return []
        }
      },
      currentCustomer () {
        if (this.tabType && this.$store.state.webchat.current[this.tabType]) {
          return this.$store.state.webchat.current[this.tabType].currentCustomer || {}
        } else {
          return {}
        }
      },
      beInvitedCon () {
        // 是否被三方会话邀请
        return this.$store.state.inviteCon || false
      },
      inviteCon () {
        //  邀请座席信息的box的展示
        if (this.tabType === 'webchat_todo' && this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId]) {
          return this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId].inviteCon
        } else if (this.tabType === 'webchat_all') {
          return false
        } else {
          return false
        }
      },
      inviteConData () {
        // 邀请座席的内容
        if (this.tabType === 'webchat_todo' && this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId].inviteConData) {
          return this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId].inviteConData
        } else if (this.tabType === 'webchat_all') {
          return false
        } else {
          return false
        }
      },
      chatInfo () {
        let messageObj
        if (this.tabType === 'webchat_todo' && this.$store.state.webchat.current.webchat_todo.chatInfoById[this.sessionId]) {
          messageObj = deepClone(this.$store.state.webchat.current.webchat_todo.chatInfoById[this.sessionId])
        } else if (this.tabType === 'webchat_all' && this.$store.state.webchat.current.webchat_all.chatInfoById) {
          messageObj = deepClone(this.$store.state.webchat.current.webchat_all.chatInfoById)
        } else if (this.tabType === 'webchat_robot' && this.$store.state.webchat.current.webchat_robot.chatInfoById) {
          messageObj = deepClone(this.$store.state.webchat.current.webchat_robot.chatInfoById)
        } else if (this.tabType === 'webchat_laterProcess' && this.$store.state.webchat.current.webchat_laterProcess.chatInfoById) {
          messageObj = deepClone(this.$store.state.webchat.current.webchat_laterProcess.chatInfoById)
        } else if (this.tabType === 'webchat_queue' && this.$store.state.webchat.current.webchat_queue.chatInfoById) {
          messageObj = deepClone(this.$store.state.webchat.current.webchat_queue.chatInfoById)
        } else {
          return {}
        }
        if (typeof messageObj === 'object') {
          if (messageObj.finishKey) {
            messageObj.finishReason = this.finishOptions[messageObj.finishKey] || messageObj.finishReason
          }
          if (messageObj.user && messageObj.user !== 'system' && messageObj.user !== 'robot') {
            let agent = getCache('agents', messageObj.user)
            if (agent.im_icon) {
              messageObj.im_src = agent.im_icon + '?imageView2/1/w/50/h/50'
              if (messageObj.contentType === 'video') {
                messageObj.im_src = agent.im_icon + '?imageView2/1/w/50/h/50'
              }
            } else {
              messageObj.im_src = ''
            }
          } else if (messageObj.user === 'robot') {
            messageObj.im_src = 'robot'
          }
        }
        return messageObj
      },
      webchatData () {
        //  会话的详细信息
        if (this.tabType === 'webchat_todo' && this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId]) {
          return this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId]
        } else if (this.tabType === 'webchat_all' && this.$store.state.webchat.current.webchat_all.currentSession) {
          return deepClone(this.$store.state.webchat.current.webchat_all.currentSession)
        } else if (this.tabType === 'webchat_robot' && this.$store.state.webchat.current.webchat_robot.currentSession) {
          return deepClone(this.$store.state.webchat.current.webchat_robot.currentSession)
        } else if (this.tabType === 'webchat_laterProcess' && this.$store.state.webchat.current.webchat_laterProcess.currentSession) {
          return deepClone(this.$store.state.webchat.current.webchat_laterProcess.currentSession)
        } else if (this.tabType === 'webchat_queue' && this.$store.state.webchat.current.webchat_queue.currentSession) {
          return deepClone(this.$store.state.webchat.current.webchat_queue.currentSession)
        } else {
          return {}
        }
      },
      isVideoing () {
        return this.$store.state.webchat.isVideoing
      },
      isInviteVideo () {
        return this.$store.state.webchat.isinviteVideo
      },
      videoSessionid () {
        return this.$store.state.webchat.videoChatData.videoSessionid
      },
      isScreenShareing () {
        return this.$store.state.webchat.isShareScreening
      },
      screenShareSessionId () {
        return this.$store.state.webchat.shareScreenSessionid
      }
    },
    mounted () {
      let self = this
      let timer
      bus.$on('renderWebchatContainer', (msg) => {
        self.initData()
        clearTimeout(timer)
        timer = setTimeout(() => {
          self.renderCustomer = true
          console.log('==========客户组件加载完成????==========')
        }, 500)
      })
      bus.$on('quickReplyCopy', (msg, flag) => {
        if (flag) return
        let str = this.sendChatMsg.content
        this.sendChatMsg.content = str + msg
        document.querySelectorAll('.send_msg_textarea')[0].focus()
      })
      bus.$on('handleFullChat', (e) => {
        const isFullChat = e.altKey && e.keyCode === 81
        if (!isFullChat) {
          return
        }
        const icon = this.$el.getElementsByClassName('fullChat')[0]
        icon.click()
      })
      if (!isHasFunc('func_active_claim_queue_session', this.$store.state.session.user)) {
        this.isShowQueueReceiveSession = false
      }
      if(this.shortcutOpen) {
        document.removeEventListener('keydown', this.shortcutDispatch)
        document.addEventListener('keydown', this.shortcutDispatch)
      }
      this.updateFullChatFromLocal()
    },
    beforeDestroy () {
      bus.$off('renderWebchatContainer')
      bus.$off('quickReplyCopy')
      bus.$off('handleFullChat')
      document.removeEventListener('click', this.showSuggestMethods)
      document.removeEventListener('keydown', this.shortcutDispatch)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "./style/webchatCon.styl"
</style>
